<template>
  <div class="phone-wrap">
    <div class="phone">
      <div class="phoneHead"></div>
      <div class="content">
        <div class="question">
          <div id="type">
            <span>1/1</span>
            <el-tag
              v-if="question&&question.type"
              class="questionType"
              effect="dark"
              size="mini"
            >{{question.name?question.name:questionType[question.type]}}</el-tag>
          </div>
          <div v-if="parentQuestion&&parentQuestion.title" id="parentQuestionTitle">
            <katex :katexContent="parentQuestion.title" index="parentQuestiontitle"></katex>
          </div>
          <div v-if="parentQuestion&&parentQuestion.materials" id="parentQuestionMaterials">
            <katex :katexContent="parentQuestion.materials" index="pqm"></katex>
          </div>
          <div v-if="question.title" id="title">
            <katex :katexContent="question.title" index="title"></katex>
          </div>
          <div v-if="question.materials" id="materials">
            <katex :katexContent="question.materials" index="materials"></katex>
          </div>
          <div
            v-if="question.type==='1' || question.type==='2' || question.type==='3'"
            :key="item.select"
            v-for="item in question.select"
          >
            <div v-if="isAnswer(item.select)" class="selectContainerAnswer">
              <div class="select">{{item.select}}</div>
              <div class="selectContent">
                <katex :katexContent="item.content" :index="item.select"></katex>
              </div>
            </div>
            <div v-else class="selectContainer">
              <div class="select">{{item.select}}</div>
              <div class="selectContent">
                <katex :katexContent="item.content" :index="item.select"></katex>
              </div>
            </div>
          </div>
          <div class="null"></div>
        </div>
        <div class="question">
          <div
            v-if="question.answer&&question.answer.length>0&&question.answer[0]!=''"
            class="body"
          >
            <h4 class="point">答案</h4>
            <div class="content">
              <katex :katexContent="question.answer+''" index="answer"></katex>
            </div>
          </div>
          <div v-if="question.analyze" class="body">
            <h4 class="point">解析</h4>
            <div class="content">
              <katex :katexContent="question.analyze" index="analyze"></katex>
            </div>
          </div>
          <div v-if="question.videoAnalyze" class="body">
            <h4 class="point">视频解析</h4>
            <div class="content" @click='player()'>
              <video height="130px;" controls="controls" :src="question.videoAnalyze" ref='video_el'></video>
            </div>
          </div>
          <div v-if="question.method" class="body">
            <h4 class="point">方法技巧</h4>
            <div class="content">
              <katex :katexContent="question.method" index="method"></katex>
            </div>
          </div>
          <div v-if="question.difficultyLevel" class="body">
            <h4 class="point">难易程度</h4>
            <div class="content">
              <el-rate :disabled="true" v-model="question.difficultyLevel" />
            </div>
          </div>
          <div v-if="knowledgePoints.length>0" class="body">
            <h4 class="point">考察知识点</h4>
            <div :key="knowledgePoint.id" v-for="knowledgePoint in knowledgePoints" class="content">
              <div class="pointTitle">{{knowledgePoint.name}}</div>
              <katex
                class="pointContent"
                :katexContent="knowledgePoint.explain"
                :index="'content'+knowledgePoint.id"
              ></katex>
              <video
                width="84%"
                controls="controls"
                style="margin-left:8%;margin-top:5px"
                :key="item.title"
                v-for="item in knowledgePoint.content"
                :src="item.video"
              ></video>
            </div>
          </div>
          <div class="null"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import katex from "./katex";
export default {
  name: "phone",
  components: {
    katex
  },
  props: {
    question: {
      type: Object,
      default: () => {}
    },
    parentQuestion: {
      type: Object,
      default: () => {}
    },
    knowledgePoints: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      questionType: {
        1: "单选题",
        2: "多选题",
        3: "判断题",
        4: "情景题",
        5: "简答题",
        6: "辨析题",
        7: "填空",
        8: "完形填空",
        9: "阅读理解",
        10: "背景题"
      }
    };
  },
  methods: {
    play(){
       this.$refs.video_el.play();
    },
    isAnswer(select) {
      if(this.question.answer instanceof Array){
        return this.question.answer.find(res => res === select);
      }
      this.question.answer=JSON.parse(this.question.answer)
      return this.question.answer.find(res => res === select);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss"  scoped>
.phone-wrap {
  height: 100%;
  background: #111;
  border-radius: 20px;
  overflow: hidden;
  width: 320px;
}

.phone {
  background: #fff;
  border-radius: 15px;
  width: 300px;
  height: 649.6px;
  margin: 10px auto;
}
.phoneHead {
  background: url("/static/img/phone.jpg") no-repeat;
  background-size: contain;
  background-position-x: center;
  background-position-y: center;
  height: 52px;
  border-radius: 15px 15px 0px 0px;
}
.content {
  margin: 10px 10px;
  word-break: break-all;
  word-spacing: break;
  overflow-y: auto;
  max-height: 588px;
}
.content::-webkit-scrollbar {
  display: none;
}
.null {
  height: 15px;
}
#title span {
    font-size: 26px !important;
    color: #303133 !important;
}
.question {
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  opacity: 1;
  margin-bottom: 20px;
  .point {
    position: relative;
    padding-left: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .point::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 6px;
    width: 8px;
    height: 8px;
    background-color: #89bfff;
    border-radius: 8px;
  }

  .pointTitle {
    position: relative;
    padding-left: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .pointTitle::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 6px;
    width: 4px;
    height: 4px;
    background-color: #89bfff;
    border-radius: 4px;
  }

  .pointContent {
    width: 84%;
    margin-left: 8%;
  }

  .body {
    width: 90%;
    margin-left: 5%;
    overflow: hidden;
    margin-top: 10px;
    .content {
      color: #606266;
      font-size: 12px;
    }
  }
  .selectContainerAnswer {
    position: relative;
    margin-top: 10px;
    width: 96%;
    margin-left: 2%;
    background: #ebf4ff;
    opacity: 1;
    border-radius: 10px;
    min-height: 40px;
    .select {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(0px, -50%);
      width: 30px;
      height: 30px;
      line-height: 26px;
      font-size: 26px;
      color: rgba(255, 255, 255, 1);
      background: rgba(137, 191, 255, 1);
      border: 2px solid rgba(137, 191, 255, 1);
      border-radius: 50%;
      opacity: 1;
      text-align: center;
      margin-left: 5px;
    }
  }
  .selectContent {
    padding-left: 50px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-left: 10px;
    word-break: break-all;
    word-wrap: break-word;
    line-height: 35px;
  }
  .selectContainer {
    position: relative;
    margin-top: 10px;
    width: 96%;
    margin-left: 2%;
    opacity: 1;
    border-radius: 10px;
    min-height: 40px;
    .select {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(0px, -50%);
      width: 30px;
      height: 30px;
      line-height: 26px;
      font-size: 26px;
      color: rgba(137, 191, 255, 1);
      background: rgba(255, 255, 255, 1);
      border: 2px solid rgba(137, 191, 255, 1);
      border-radius: 50%;
      opacity: 1;
      text-align: center;
      margin-left: 5px;
    }
  }
}
#type {
  margin-left: 10px;
  padding-top: 10px;
  .questionType {
    margin-left: 7px;
  }
}

#title {
  margin-top: 10px;
  margin-left: 5px;
}
#materials {
  margin-left: 5px;
}
#parentQuestionMaterials {
  margin-left: 5px;
}
#parentQuestionType {
  margin-left: 10px;
  padding-top: 10px;
  .questionType {
    margin-left: 7px;
  }
}

#parentQuestionTitle {
  margin-top: 10px;
  margin-left: 5px;
}
</style>
